<div class="view">
  <div class="view-title">
    {{ shortName }}
  </div>

  <div class="view-title-action" v-if="type !== 'download'">
    <button class="light" @click="project()">
      <i class="material-icons" title="Update Cast">cast</i>
    </button>
    <button class="light" @click="save()">
      <i class="material-icons">save</i>
    </button>
  </div>

  <div class="file-container"
    @dragenter.stop.prevent
    @dragover.stop.prevent="dragover"
    @dragleave.stop.prevent="dragleave"
    @dragend="dragend"
    @drop.stop.prevent="drop"
    
    @scroll="scroll">
    <div class="file-pdf" v-el:pages v-show="type === 'pdf'">
    </div>

    <div class="file-image" v-if="type === 'image'">
      <img :src="imgRendered">
    </div>

    <div class="file-download" v-if="type === 'download'">
      <button @click="save"><i class="material-icons">save</i> 保存</button>
    </div>
  </div>

  <div class="dnd-mask dnd-edit" transition="opacity" v-show="dragging">
    <i class="dnd-icon material-icons">edit</i>
    <div class="dnd-hint">拖放以更新</div>
  </div>

  <div class="inset-shadow"></div>
</div>
